Skip to main content

📑 Pages & Screens

Managing your application's pages and screens is a fundamental aspect of app development. AppStruct provides a comprehensive Pages & Screens management system that allows you to create, organize, and configure multiple screens within your app efficiently.

Overview​

AppStruct's Pages & Screens system enables you to:

  • View All Pages: Access a comprehensive overview of all screens in your project
  • Add New Screens: Create new pages using templates or start from scratch
  • Reorder Pages: Drag and drop pages to organize them in your preferred order
  • Configure Screen Types: Set each page as Home, Default, or Authentication Required
  • Manage Page Content: Edit page names, duplicate pages, or delete unwanted screens
  • Smart Animation Support: Manage multi-screen smart animations when enabled
Loading video...

Accessing Pages & Screens​

Step 1: Open Pages & Screens

  1. Locate the Pages Icon:
    • In the left sidebar of the Constructor, find the Pages & Screens icon
  2. Click to Open:
    • Click on the icon to open the Pages & Screens management panel
    • This displays the title "All Pages / Screens" with the subtitle "Manage your app pages"

Step 2: View Your Pages List

  1. Pages Overview:
    • All existing pages are displayed in a vertical list
    • Each page shows its name and screen type icon:
      • 🏠 Home - The main landing page of your app
      • 📄 Default - Standard pages for general content
      • 🔒 Authentication Required - Pages that require user login
  2. Drag Handles:
    • Each page (except the first page in Smart Animation mode) has a drag handle icon for reordering

Adding a New Screen​

Step 1: Create New Page

  1. Click "Add Screen":
    • Locate the "Add Screen" button at the bottom of the pages list
    • Click to open the screen creation process

Step 2: Choose Template or Start Blank

  1. Select Template:
    • Choose from 30+ pre-built templates (Login, Dashboard, Profile, etc.)
    • Or select "Blank Screen" to start with an empty canvas
  2. Create the Screen:
    • The new screen will be added to your pages list
    • It will automatically appear in the Constructor canvas for immediate editing

Managing Individual Pages​

Step 1: Access Page Settings

  1. Select a Page:
    • Click on any page in the pages list to access its individual settings
    • This opens the page details view with configuration options

Step 2: Edit Page Properties

  1. Change Page Name:

    • Edit the page name in the text input field at the top
    • Changes are saved automatically as you type

  2. Set Screen Type:

    • Use the "Screen Type" dropdown to select:
      • Home - Sets this as your app's main landing page
      • Default - Standard page for general content
      • Authentication Required - Requires users to be logged in to access

Step 3: Page Actions

  1. Copy Page:

    • Click the "Copy" button to duplicate the entire page
    • The duplicated page includes all components and styling
    • Copied pages are named with a suffix (e.g., "Page Name-1")

  2. Delete Page:

    • Click the "Delete" button to remove the page
    • Note: Home pages cannot be deleted as they serve as the app's entry point
    • Deletion is permanent and cannot be undone

Reordering Pages​

Drag and Drop Functionality

  1. Grab the Drag Handle:
    • Each page has a drag handle icon (≡) on the left side
  2. Drag to Reorder:
    • Click and drag pages up or down to reorder them
    • Release to drop the page in its new position
  3. Smart Animation Restrictions:
    • In Smart Animation mode, the first page cannot be reordered
    • This page serves as the base template for the animation sequence

Reorder Screens

Components Tree​

View Page Components

  1. Components List:
    • When viewing individual page settings, see all components on that page
    • Components are displayed in a hierarchical tree structure
  2. Component Navigation:
    • Click on any component in the tree to select it in the Constructor
    • This provides quick access to edit specific elements on the page

Reorder Screens

Best Practices​

Page Organization

  • Logical Flow: Arrange pages in the order users will typically navigate them
  • Clear Naming: Use descriptive names that clearly indicate each page's purpose
  • Screen Types: Set appropriate screen types to control access and navigation behavior

Template Usage

  • Start with Templates: Use pre-built templates as starting points to save time
  • Customize Gradually: Modify template components to match your brand and requirements
  • Test Navigation: Ensure smooth flow between pages before publishing

Return to All Pages

  1. Back Button: When viewing individual page settings, click the back arrow to return to the all pages overview
  2. Quick Navigation: Click on different pages in the list to quickly switch between them

Need Assistance?​

If you encounter any challenges or require further guidance while managing your app pages, please refer to the Documentation or contact our support team at [email protected].